<template>
  <div class="size-picker-container">
    <div v-for="opt in options" :key="opt" :class="{'color-gray-96 font-color-primary': opt === value}"
         class="size-picker-item" @click="select(opt)">
      <i v-show="opt === value" class="iconfont icon-seleted size-picker-icon mar-rgt-10"></i>
      <span>{{opt}}px</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SizePicker',
    model: {
      event: 'change'
    },
    props: {
      value: {
        type: Number,
        default: 14
      }
    },
    data() {
      return {
        options: [
          10, 11, 12, 13, 14, 15, 16, 17, 18, 20,
          22, 24, 26, 28, 30, 32, 34, 36, 38, 40,
          44, 46, 48, 80, 60
        ]
      };
    },
    mounted() {

    },
    methods: {
      select(size) {
        this.$emit('change', size);
      }
    }
  };
</script>

<style scoped lang="less">
  .size-picker-container {
    padding: 8px 0;
    max-height: 350px;
    overflow: auto;

    .size-picker-item {
      position: relative;
      text-align: center;
      padding: 8px 0;
      font-size: 14px;
      cursor: pointer;

      .size-picker-icon {
        position: absolute;
        top: 5px;
        left: 10px;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .size-picker-item:hover {
      background: @colorGray96;
    }
  }
</style>
